<template>
  <el-card>
    <el-col :span="24" class="toolbar">
      <el-form :inline="true"  class="demo-form-inline">
        <el-form-item>
          <el-input v-model="search" placeholder="名称、联系人、联系电话"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleSearch">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleAdd">新增</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table :data="page.rows"highlight-current-row stripe border  v-loading="listLoading" style="width: 100%;">
      <el-table-column prop="name" label="名称" ></el-table-column>
      <el-table-column prop="contact" label="联系人" ></el-table-column>
      <el-table-column prop="phone" label="联系电话" ></el-table-column>
      <el-table-column prop="status" label="状态" ></el-table-column>
      <el-table-column prop="code" label="编码" ></el-table-column>
      <el-table-column prop="notes" label="备注" ></el-table-column>
      <el-table-column label="操作">
        <template scope="scope">
          <el-button title="编辑" icon="edit" size="mini" @click="handleEdit(scope.row)"></el-button>
          <el-button title="删除" icon="delete" type="danger" size="mini" @click="handleDelete(scope.row)"></el-button>
        </template>	
      </el-table-column>
    </el-table>

    <!--分页-->
    <el-col :span="24" class="toolPage">
      <el-pagination :current-page="page.current" :page-sizes="[10, 20, 50, 100]" :page-size="page.size"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="page.total" style="float:right"
                     @size-change="handleSizeChange"
                     @current-change="handlePageChange">
      </el-pagination>
    </el-col>

  </el-card>
</template>

<script>
export default {
    beforeMount() {
      this.loadGridData();

    },
    data() {
      return {
        page: {
          total: 0,
          current: 1,
          size: 10,
          rows: []
        },

				editFormVisible:false,//编辑界面显是否显示
				editFormTtile:'编辑',//编辑界面标题
				editLoading:false,
				btnEditText:'提 交',
				search: '' ,
				listLoading:true
     	}
    },
    methods: {
			handleSizeChange(size) {
				this.page.size = size;
				this.loadGridData();
			},
			handlePageChange(current) {
				this.page.current = current;
				this.loadGridData();
			},
			loadGridData() {
			  this.listLoading = true;
				let param = {
					pageSize: this.page.size,
					page: this.page.current,
					text: this.search

				};
				this.axios.get("/couriers", {params: param}).then(response => {
					this.page = response.data;
					this.listLoading = false;
				})
			},

			handleAdd(){
				this.$router.push('/couriers/new');
			},

			handleEdit(row){
				this.$router.push(`/couriers/${row.id}/edit`);
			},
			handleSearch(){
			this.loadGridData()
			},
      handleDelete(row){
        this.$confirm('确认删除此信息吗?', '提示', {})
        .then(()=>{ this.axios.delete(`/couriers/${row.id}`).then(()=>{this.loadGridData()})})
      }
    }
  }

</script>
